<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <base href="<%=basePath%>">
    <title>用户管理</title>
    <meta charset="utf-8">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="js/jquery-ui/jquery-ui.min.css">
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.serializejson.min.js"></script>
    <script src="js/jquery-ui/jquery-ui.min.js"></script>
</head>
<body>
<h1 th:text="${session.USER_SESSION.toString()}"></h1>
<a href="">退出</a>
<!-- 用户列表 -->
<div class="tbl-title">用户列表</div>
<button onclick="showAddUserModal()">添加新的用户</button>
<table id="users" class="tbl-list">
    <caption>展示用户信息</caption>
    <!--展示用户信息 -->
    <thead>
    <tr>
        <th id="id">ID</th>
        <th id="password">密码</th>
        <th id="name">用户名</th>
        <th id="code">Code</th>
        <th id="operation">操作</th>
    </tr>
    </thead>
    <tbody>

</table>

<!-- 添加用户模态框 -->
<div id="add-user-modal" title="添加用户" style="display:none;">
    <form id="add-user-form">

        <table class="modal-tbl"><!--展示用户信息 -->
            <caption>展示用户信息</caption>
            <th id="th1"></th>
            <tr><td>ID</td><td><input type="text" name="id"></td></tr>
            <tr><td>密码</td><td><input type="password" name="password"></td></tr>
            <tr><td>用户名</td><td><input type="text" name="name"></td></tr>
            <tr><td>Age</td><td><input type="text" name="age"></td></tr>
        </table>
    </form>
</div>
<!--删除用户对话模态框 -->
<div id="delete-user-modal" title="删除用户" style="display:none;">
    <p>确定删除该用户吗？</p>
</div>
<!-- 更新用户模态框 -->
<div id="update-user-modal" title="更新用户" style="display:none;">
    <form id="update-user-form">
        <table class="modal-tbl">
            <caption>展示用户信息</caption>
            <th id="th2"></th>
            <!--展示用户信息 -->
            <tr style="display: none"><td>ID</td><td><input type="text" name="id"></td></tr>
            <tr><td>账户</td><td><input type="text" name="id"></td></tr>
            <tr><td>密码</td><td><input type="password" name="password"></td></tr>
            <tr><td>姓名</td><td><input type="text" name="name"></td></tr>
            <tr><td>Age</td><td><input type="text" name="age"></td></tr>
        </table>
    </form>
</div>
<!-- 提示信息模态框 -->
<div id="msg-modal" title="" style="display:none">
    <p></p>
</div>
<script>
    $(function() {
        listAllUser();
    });
    function listAllUser() {
        $.ajax({
            type: "GET",
            url: "/user/list",
            dataType: "json",
            success: function(data) {
                // 每次载入前先清空显示区域，防止数据重复显示
                $("#users tbody").empty();
                if (data.code!==0){
                    alert(data.msg)
                }else {
                    var users = data.data;
                    for (var i in users) {
                        var user = users[i];
                        var userStr = JSON.stringify(user);
                        $("#users tbody").append(
                            '<tr><td>' + user.id + '</td>'
                            + '<td>' + user.password + '</td>'
                            + '<td>' + user.name + '</td>'
                            + '<td>' + user.age + '</td>'
                            + '<td><button onclick=\'showUpdateUserModal(' + userStr + ')\'>更新</button> '
                            + '<button onclick="deleteUser(' + user.id + ')">删除</button></td></tr>');
                    }
                }

            },
            error: function() {
                console.log("ajax error");
            }
        });
    }
    // 显示添加用户模态框
    function showAddUserModal() {
        $("#add-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
        $("#add-user-modal").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "提交": function() {
                    addUser();
                },
                "取消": function() {
                    $(this).dialog("close");
                },
            },
        });
    }
    // 添加用户
    function addUser() {
        var user = $("#add-user-form").serializeJSON();
        var userStr = JSON.stringify(user);
        alert(userStr)
        $.ajax({
            type: "POST",
            url: "/user/add",
            data: userStr,
            contentType:'application/json;charset=utf-8',
            dataType: "json",
            success: function(data) {

                if (data.data && data.code === 0) {
                    $("#add-user-modal").dialog("close");
                    showMsg('添加成功！');
                    listAllUser();
                } else {
                    $("#add-user-modal").dialog("close");
                    showMsg('添加失败！'+data.msg);
                    listAllUser();
                }
            },
            error: function(data) {
                console.log("ajax error:"+data.msg);
            },
        });
    }
    // 删除用户
    function deleteUser(id) {
        // 将id封装为JSON格式数据
        // var data = {};
        // data.id = id;
        // var dataStr = JSON.stringify(data);
        // 显示删除用户模态框
        $("#delete-user-modal").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "确认": function() {
                    $.ajax({
                        type: "GET",
                        url: "/user/remove?id="+id,
                        contentType:'application/json;charset=utf-8',
                        dataType:"json",
                        success: function(data) {
                            if (data.data && data.code == 0) {
                                $("#delete-user-modal").dialog("close");
                                showMsg('删除成功！');
                                listAllUser();
                            } else {
                                $("#delete-user-modal").dialog("close");
                                showMsg('删除失败！'+data.msg);
                                listAllUser();
                            }
                        },
                        error: function(data) {
                            console.log("ajax error:"+data.msg );
                        },
                    });
                },
                "取消": function() {
                    $(this).dialog("close");
                },
            },
        });
    }
    //显示更新用户模态框
    function showUpdateUserModal(user) {
        $("#update-user-form")[0].reset();  // 每次载入前先清空表单，防止显示之前的信息
        // 表单赋值
        $("#update-user-form input[name='id']").val(user.id);
        $("#update-user-form input[name='password']").val(user.password);
        $("#update-user-form input[name='name']").val(user.name);
        $("#update-user-form input[name='info']").val(user.age);
        $("#update-user-modal").dialog({
            resizable: false,
            modal: true,
            buttons: {
                "提交": function () {
                    updateUser();
                },
                "取消": function () {
                    $(this).dialog("close");
                }
            }
        });
    }
    // 更新用户
    function updateUser() {
        // 获取序列化表单信息
        var user = $("#update-user-form").serializeJSON();
        var userStr = JSON.stringify(user);

        $.ajax({
            type: "POST",
            url: "/user/update",
            data: userStr,
            contentType: 'application/json;charset=utf-8',
            dataType: "json",
            success: function(data) {
                if (data.data && data.code===0) {
                    $("#update-user-modal").dialog("close");
                    showMsg('更新成功！');
                    listAllUser();
                } else {
                    $("#update-user-modal").dialog("close");
                    showMsg('更新失败！'+data.msg);
                    listAllUser();
                }
            },
            error: function(data) {
                console.log("ajax error"+data.msg);
            }
        });
    }

    //显示提示信息
    function showMsg(text) {
        $("#msg-modal p").text(''); // 每次载入前先清空显示区域，防止显示之前的信息
        $("#msg-modal p").text(text);
        $("#msg-modal").dialog({
            modal: true,
        });
        // 2s后消失
        setTimeout(function() {
            $("#msg-modal").dialog("close")
        },2000);
    }
</script>
</body>
</html>